<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script src="/js/jquery.hammer/hammer.min.js"></script>
    <script src="/js/bootstrap.table/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.table/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
    <script src="/js/jquery.ztree.all.min.js"></script>
    <script src="/js/dialog.js"></script>
    <script src="/js/comm.js" type="text/javascript"></script>

    <link href="/css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="/css/bootstrap.table/bootstrap-table.min.css"/>
    <link href="/css/zTreeStyle.css" rel="stylesheet" />
    <link href="/css/common.css" rel="stylesheet" />
</head>
<style type="text/css">

</style>
<script type="text/javascript">
    var html = "";
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        async: {
            enable: true,
            type: "post",
            url: "/system/getNode.do",
            autoParam: ["id"]
        },
        check: {
            enable: false
        }
    };
    var nodes = [
        { "id":1,
            "name":"主页",
            "isParent" :true,
            "nocheck":true,
            children: []
        }
    ]

    $(document).ready(function(){
        html = $("#addEditForm").html();
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, nodes);
    });

    function addEditNode(info) {
        var nodess = zTreeObj.getSelectedNodes();
        var title = "";
        if(nodess!=null&&nodess!=""){
            if(info=="add"){
                title = "新增节点";
            }else if (info=="edit"){
                title = "修改节点";
                //如果是修改则先查询数据
                $.ajax({
                    url: "/system/getResource.do",
                    data: {id:nodess[0].id},
                    async: false,
                    type: "POST",
                    success: function(data){
                        $("#code").val(data.code);
                        $("#name").val(data.name);
                        $("#icon").val(data.icon);
                        $("#url").val(data.url);
                        $("#sort").val(data.sort);
                        $("#type").val(data.type);
                        $("#status").val(data.status);
                        $("#description").val(data.description);
                    },
                    dataType:"json"});
            }

            var elem = document.getElementById('addEditForm');
            dialog({
                title: title,
                content: elem,
                width: '50em',
                okValue: "确定",
                ok : function () {
                    if(!saveCheckInfo()){
                        return false;
                    }
                    saveNode(info,nodess[0].id);
                    return true;

                },
                onremove: function () {
                    initInput();
                },
                cancelValue: '取消',
                cancel: function () {}
            }).showModal();
        }else {
            promptDail('请先选择一个节点!');
        }
    }
    
    function saveNode(info,id) {
        var url = "";
        var data = {};
        data["id"] = id;
        data["code"] = $("#code").val();
        data["name"] = $("#name").val();
        data["icon"] = $("#icon").val();
        data["url"] = $("#url").val();
        data["sort"] = $("#sort").val();
        data["type"] = $("#type").val();
        data["status"] = $("#status").val();
        data["description"] = $("#description").val();
        if(info=="edit"){
            url = "/system/editNode.do";
        }else {
            url = "/system/addNode.do";
        }
        $.post(url,data,function (data) {
            if(data.value){
                dialog({
                    title: '提示信息',
                    width: "300px",
                    content: '保存成功!',
                    okValue: '确定',
                    ok: function () {
                        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, nodes);
                    },
                    onremove: function () {
                        initInput();
                    },
                }).showModal();

            }else{
                errorDail('保存失败!');
            }
        },"json");
    }

    //删除节点
    function delEditNode() {
        var nodess = zTreeObj.getSelectedNodes();
        if(nodess!=null&&nodess!=""){
            var ids = nodess[0].id;
            dialog({
                title: '提示信息',
                content: '确认删除数据!',
                okValue: '确定',
                ok: function () {
                    $.post("/system/deleteNode.do",{"id":ids},function (data) {
                        if (data.value){
                            okDail("删除成功!");
                            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, nodes);
                        }else {
                            errorDail("删除失败!");
                        }
                    },"json");
                }
            }).showModal();
        }else{
            promptDail('请先选择一个节点!');
        }
    }

    //失去焦点判断是否为空
    function onBlurValue(obj) {
        var info = $(obj).val();
        if(info!=null&&info!=""){
            $(obj).next().hide();
        }else {
            $(obj).next().show();
        }

    }

    //判断是否为空
    function saveCheckInfo(){
        var b = true;
        b = checkValue("name");
        b = checkValue("code");
        b = checkValue("url");
        b = checkValue("sort");

        return b;
    }
    
    function checkValue(infoId) {
        var b = true;
        var info = $("#"+infoId).val();
        if(info!=null&&info!=""){
            $("#"+infoId).next().hide();
        }else {
            $("#"+infoId).next().show();
            b = false;
        }

        return b;
    }
    
    function initInput() {
        $("#code").val("");
        $("#name").val("");
        $("#icon").val("");
        $("#url").val("");
        $("#sort").val("");
        $("#type").val(0);
        $("#status").val(1);
        $("#description").val("");
    }
</script>
<body style="padding:5px;">
<div class="panel panel-default" style="min-height: 90%;">
    <div class="panel-heading">
        资源列表
    </div>
    <div class="panel-body form-group" style="margin-bottom:0px;">
        <div class="col-sm-1">
            <button class="glyphicon glyphicon-plus btn btn-primary " id="add_btn" onclick="addEditNode('add');return false;">新增</button>
        </div>
        <div class="col-sm-1">
            <button class="glyphicon glyphicon-pencil btn btn-info" id="edit_btn" onclick="addEditNode('edit');return false;">修改</button>
        </div>
        <div class="col-sm-1">
            <button class="	glyphicon glyphicon-minus btn btn-danger" id="delet_btn" onclick="delEditNode();return false;">删除</button>
        </div>

    </div>
    <div class="panel-body form-group" style="margin-bottom:0px;">
        <ul id="treeDemo" class="ztree">

        </ul>
    </div>
</div>
<div id="addEditForm" style="display: none;">
    <div style="width: 100%;margin-top: 10px;">
        <form class="form-horizontal" id="nodeForm" role="form">
            <div class="form-group">
                <label class="col-sm-2 control-label">资源编号<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <input type="text" class="form-control" id="code" name="code" placeholder="资源编号" onBlur="onBlurValue(this)">
                    <span class="help-block" style="color: red; display: none;">请输入资源编号</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">资源名称<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <input type="text" class="form-control"  id="name" name="name"  placeholder="资源名称" onBlur="onBlurValue(this)">
                    <span class="help-block" style="color: red; display: none;">请输入资源名称</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">图标</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control"  id="icon" name="icon"  placeholder="请输入图标名称" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">资源地址<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <input type="text" class="form-control"  id="url" name="url"  placeholder="请输入资源地址" onBlur="onBlurValue(this)"/>
                    <span class="help-block" style="color: red; display: none;">请输入资源地址</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">资源排序<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <input type="text" class="form-control"  id="sort" name="sort"  placeholder="资源排序" onBlur="onBlurValue(this)"
                           onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')"/>
                    <span class="help-block" style="color: red; display: none;">请输入资源排序</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">权限类型<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <select class="form-control" id="type" name="type" style="width: 30%">
                        <option value="0" >菜单</option>
                        <option value="1" >功能</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">权限类型<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <select class="form-control" id="status" name="status" style="width: 30%">
                        <option value="1" >有效</option>
                        <option value="0" >禁用</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">描述</label>
                <div class="col-sm-7">
                    <textarea class="form-control"  id="description" name="description"  placeholder="描述" ></textarea>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>